<template>
  <div v-if="loading">loading</div>
  <div v-else>
    <header
      @dblclick="handleWindow('max')"
      @mousedown.self="winDown"
      @mousemove.self="winMove"
      @mouseup.self="winUp"
    >
      <h1>{{ title }}</h1>
      <div class="right">
        <span @click="handleWindow('max')">{{ isMaxed ? '还原' : '最大化' }} </span>
        <span @click="handleWindow('min')">最小化</span>
        <span @click="handleWindow('close')"> 关闭</span>
      </div>
    </header>

    <div class="content">
      <aside @contextmenu="handleSideContext">这是左侧菜单</aside>
      <main @contextmenu="handleMainContext">
        <a href="https://cn.bing.comg" target="__blank">浏览器打开</a>

        <input v-model="title" type="text" />
        <button @click="changeTitle">修改标题</button>

        <div class="separator"></div>

        <span>主题切换</span>
        <button @click="handleTheme()">切换主题</button>
        <button @click="handleTheme('system')">跟随系统</button>

        <div class="separator"></div>

        <button @click="checkUpdate">检查更新</button>
        <button @click="handleDialogMessage">消息提示</button>

        <div class="separator"></div>

        <button @click="openFile">打开文件</button>
        <div>
          <textarea v-model="fileContent" rows="10"></textarea>
        </div>
        <button @click="saveFile">另存为</button>

        <div class="separator"></div>

        <div>网络状态: {{ isOnline ? '在线' : '离线' }}</div>

        <div class="separator"></div>

        <button @click="handleCapture">屏幕截图</button>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
const title = ref('hello world')
const isMaxed = ref(false)
const isDragging = ref(false)
const lastMousePosition = ref({ x: 0, y: 0 })

const winDown = (e) => {
  isDragging.value = true
  lastMousePosition.value = { x: e.clientX, y: e.clientY }
}
const winMove = async (e) => {
  if (!isDragging.value) return

  const { x, y } = await window.api.invoke('get-window-pos')

  const newPosition = {
    x: x + e.clientX - lastMousePosition.value.x,
    y: y + e.clientY - lastMousePosition.value.y
  }

  window.api.send('set-window-pos', newPosition)
}
const winUp = () => {
  isDragging.value = false
}

const changeTitle = () => {
  window.api.setTitle(title.value)
}

const handleWindow = async (action) => {
  isMaxed.value = await window.api.invoke('window-state', action)
}

const handleTheme = (isSystem = '') => {
  window.api.invoke('dark-mode', isSystem)
}

const handleSideContext = () => {
  window.api.send('menu:context', 'side')
}

const handleMainContext = () => {
  window.api.send('menu:context', 'main')
}

const checkUpdate = () => {
  const image = 'src/assets/icon.ico'

  const options = {
    icon: image,
    body: '发现新版本，点击下载'
  }
  new Notification('更新提示', options)
}

const handleDialogMessage = async () => {
  const res = await window.api.invoke('dialog:message', {
    type: 'error',
    title: '消息提示',
    message: '确认退出吗？',
    detail: '退出后身份将失效，需要重新登录',
    checkboxLabel: '我知道了，不再提示',
    buttons: ['Cancel', 'OK']
  })

  console.log(res)
}

const fileContent = ref('hello world')
const openFile = async () => {
  const options = {
    title: '请选择文件',
    properties: ['openFile'],
    filters: [
      { name: '文本文件', extensions: ['txt'] },
      { name: '所有文件', extensions: ['*'] }
    ]
  }

  const { canceled, filePaths } = await window.api.invoke('dialog:open-file', options)
  if (canceled) return

  const res = await window.api.invoke('fs:read-file', filePaths[0])
  fileContent.value = res
}
const saveFile = async () => {
  const date = new Date().toISOString().replace(/:/g, '-')

  const options = {
    title: '保存文件',
    defaultPath: date + '-新建文本文档.txt'
  }

  const { canceled, filePath } = await window.api.invoke('dialog:save-file', options)
  if (canceled) return
  await window.api.invoke('fs:write-file', { filePath, fileContent: fileContent.value })

  window.api.invoke('dialog:message', {
    type: 'info',
    title: '保存成功',
    message: '文件保存成功'
  })
}

const isOnline = computed(() => window.navigator.onLine)

const loading = ref(true)

const handleCapture = async () => {
  await window.api.invoke('capture:open')
}

onMounted(() => {
  setTimeout(() => {
    loading.value = false
    window.api.send('loading:done')
  }, 1000)
})
</script>

<style scoped>
.separator {
  margin: 20px 0;
  border-bottom: 1px solid #000;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background-color: #ccc;
  padding: 10px;

  h1 {
    font-style: 24px;
    margin: 0;
    padding: 0;
  }

  .right {
    :not(:last-child) {
      margin-right: 20px;
    }
  }
}

.content {
  display: flex;
  height: calc(100vh - 65px);

  aside {
    padding: 10px;
    width: 280px;
    background-color: #eee;
  }

  main {
    padding: 10px;
    flex: 1;
    overflow-y: auto;
  }
}
</style>
